<template>


    <h2>添加自定义形状</h2>

    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;

    let str = "ha"
    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }
    const color = '#000'
    const templmap = new go.Map()
    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: false, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });

        const defaultTemplate = $(
            go.Link,
            $(go.Shape, {stroke: color, strokeWidth: 1}),
            $(go.Shape, {toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1})
        )

// 虚线连线模板，关键属性：strokeDashArray: [6, 3]
        const dashedTemplate = $(
            go.Link,
            // name: 'dashedLink'，后面动画用到
            $(go.Shape, {name: 'dashedLink', stroke: color, strokeWidth: 1, strokeDashArray: [6, 3]}),
            $(go.Shape, {toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 1})
        )

        templmap.add('', defaultTemplate)
// dashed 为名称，描述时用属性 category: 'dashed' 指定
        templmap.add('dashed', dashedTemplate)

        myDiagram.linkTemplateMap = templmap


        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                {locationSpot: go.Spot.Center,selectionAdorned: false},
                $(go.Shape, "RoundedRectangle",
                    { // 自定义highlight
                        fill: $(go.Brush, 'Linear', {0.0: "#5566D7", 1.0: "#4E99EF", start: go.Spot.Bottom, end: go.Spot.Top}), stroke: "orange", strokeWidth: 5
                    },

                    new go.Binding("stroke", "bSearch", function (v) {
                        return v ? "red" : "blue";
                    }),
                    new go.Binding("strokeWidth", "bSearch", function (v) {
                        return v ? 3 : 0;
                    })
                ),
                $(go.TextBlock,
                    {margin: 25},
                    new go.Binding("text", "key")),
            );


        myDiagram.model.nodeDataArray = [
            {key: "Alpha", id: '1', highlight: false, bSearch: false},  // just one node, and no links
            {key: "Beta", id: '2', highlight: false, bSearch: false},  // just one node, and no links
            {key: "good", id: '3', highlight: false, bSearch: false},  // just one node, and no links
            {key: "hello", id: '4', highlight: false, bSearch: false}
        ];


        // 虚线连线模板，关键属性：strokeDashArray: [6, 3]


        function flash() {

            // 所有模型更改都应该发生在事务中
            myDiagram.model.commit(function (m) {
                let list = m.nodeDataArray;
                //let list = m.nodeDataArray;
                list.forEach(function (element) {
                    m.set(element, "bSearch", !element.bSearch);//设置data值里的highlight为!data.highlight
                });
                //var data = m.nodeDataArray[0];  // 获取第一个数组node的值
                //m.set(data, "highlight", !data.highlight);//设置data值里的highlight为!data.highlight
            }, "flash");
        }

        function loop() {


            //每0.5秒执行一次修改
            setTimeout(function () {
                flash();
                loop();
            }, 500);
        }

        loop();


    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>